<style lang="less">
.data-overview {
	width: 100%;
	display: grid;
	grid-template-rows: 248px repeat(3, 300px);
	row-gap: 12px;

	.data-overview__row {
		display: flex;

		.data-overview__row-item {
			box-sizing: border-box;
			padding: 20px;
			height: 100%;
			width: 100%;
			background: #fff;
			border-radius: 2px;

			.data-overview__row-title {
				color: #262626;
				font-weight: 600;
				font-size: 16px;
				margin-bottom: 16px;

				&--more {
					color: #595959;
					font-size: 14px;
				}

				&--between {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.choose-time {
						color: #595959;
						font-size: 14px;

						.time {
							cursor: pointer;

							&.active {
								color: #386cff;
							}

							&+.time {
								margin-left: 16px;
							}
						}
					}
				}
			}

			.data-overview__row-content {
				height: 220px;
			}
		}

		&:nth-of-type(1) {
			.data-overview__row-content {
				height: 172px;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(2, 80px);
				gap: 12px;
				min-width: 236px;

				.content__item {
					background: #f4f5f7;
					border-radius: 2px;
					box-sizing: border-box;
					padding: 16px 16px 12px;

					.content__title {
						margin-bottom: 12px;
						line-height: 16px;
						color: #595959;
						font-size: 12px;

						&--between {
							display: flex;
							justify-content: space-between;
						}
					}

					.content__data {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.data__number {
							color: #262626;
							font-size: 20px;
							font-weight: 600;

							&--yellow {
								color: #ffb53c;
							}
						}

						.data__tip {
							color: #808080;
							font-size: 12px;

							&--red {
								color: #ff3c3c;
							}

							&--green {
								color: #00b42a;
							}
						}
					}
				}
			}
		}
	}
}
</style>

<template>
	<div class="data-overview">
	<div class="data-overview__row">
		<div class="data-overview__row-item">
			<p class="data-overview__row-title">数据概览</p>
			<div class="data-overview__row-content">
				<div class="content__item" v-for="it in dataOverviewData" :key="it.title">
					<p class="content__title">
						<span>{{ it.title }}</span>
						<template v-if="it.haveTooltip">
							<a-tooltip :content="it.titileTip">
								<icon-at />
							</a-tooltip>
						</template>
					</p>
					<p class="content__data">
						<span class="data__number">{{ it.data }}</span>
						<span class="data__tip">
								<span>{{ it.increaseUnit }}：</span>
								<template v-if="it.havePercentage">
									<span class="data__tip--red" v-if="+it.percentage >= 0">
										<i class="iconfont icon-shangzhang"></i>
										{{ it.percentage }}%
									</span>
									<span class="data__tip--green" v-else>
										<i class="iconfont icon-xiajiang"></i>
										{{ Math.abs(+it.percentage) }}%
									</span>
								</template>
								<template v-else>
									<span>{{ it.increaseData }}</span>
								</template>
							</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="data-overview__row">
	      <div class="data-overview__row-item">
	        <p class="data-overview__row-title data-overview__row-title--between">
	          <span>官网访问人数</span>
	          <span class="choose-time">
	            <span
	              class="time"
	              :class="visitCountCurrTimeArea === i ? 'active' : ''"
	              v-for="(it, i) in chooseTimeList"
	              :key="it"
	              @click="changevisitCountCurrTimeArea(i)"
	              >{{ it }}</span
	            >
	          </span>
	        </p>
	        <div class="data-overview__row-content">
	          <echarts-line series-name="官网访问人数" />
	        </div>
	      </div>
	    </div> -->
		<div class="data-overview__row">
			<div class="data-overview__row-item">
				<p class="data-overview__row-title data-overview__row-title--between">
					<span>注册人数</span>
					<span class="choose-time">
						<span class="time" :class="
							echartsTime['registerCountData'].visitCountCurrTimeArea === i
								? 'active'
								: ''
						" v-for="(it, i) in chooseTimeList" :key="it"
							@click="changevisitCountCurrTimeArea('registerCountData', i)">{{ it }}</span>
					</span>
				</p>
				<div class="data-overview__row-content">
					<echarts-line series-name="注册人数" :data="echartsTime['registerCountData'].data" />
				</div>
			</div>
		</div>
		<div class="data-overview__row">
			<div class="data-overview__row-item">
				<p class="data-overview__row-title data-overview__row-title--between">
					<span>新增接待计划数</span>
					<span class="choose-time">
						<span class="time" :class="
							echartsTime['newActivityData'].visitCountCurrTimeArea === i
								? 'active'
								: ''
						" v-for="(it, i) in chooseTimeList" :key="it"
							@click="changevisitCountCurrTimeArea('newActivityData', i)">{{ it }}</span>
					</span>
				</p>
				<div class="data-overview__row-content">
					<echarts-line series-name="新增接待计划数" :data="echartsTime['newActivityData'].data" />
				</div>
			</div>
		</div>
		<div class="data-overview__row">
			<div class="data-overview__row-item">
				<p class="data-overview__row-title data-overview__row-title--between">
					<span>新增活动数</span>
					<span class="choose-time">
						<span class="time" :class="
							echartsTime['newActivityData'].visitCountCurrTimeArea === i
								? 'active'
								: ''
						" v-for="(it, i) in chooseTimeList" :key="it"
							@click="changevisitCountCurrTimeArea('newActivityData', i)">{{ it }}</span>
					</span>
				</p>
				<div class="data-overview__row-content">
					<echarts-line series-name="新增活动数" :data="echartsTime['newActivityData'].data" />
				</div>
			</div>
		</div>
		<div class="data-overview__row">
			<div class="data-overview__row-item">
				<p class="data-overview__row-title data-overview__row-title--between">
					<span>新增会员人数</span>
					<span class="choose-time">
						<span class="time" :class="
							echartsTime['newMemberData'].visitCountCurrTimeArea === i
								? 'active'
								: ''
						" v-for="(it, i) in chooseTimeList" :key="it"
							@click="changevisitCountCurrTimeArea('newMemberData', i)">{{ it }}</span>
					</span>
				</p>
				<div class="data-overview__row-content">
					<echarts-line series-name="新增会员人数" :data="echartsTime['newMemberData'].data" />
				</div>
			</div>
		</div>
		<!-- <div class="data-overview__row">
	      <div class="data-overview__row-item">
	        <p class="data-overview__row-title data-overview__row-title--between">
	          <span>流量消耗</span>
	          <span class="choose-time">
	            <span
	              class="time"
	              :class="
	                echartsTime['flowConsumeData'].visitCountCurrTimeArea === i
	                  ? 'active'
	                  : ''
	              "
	              v-for="(it, i) in chooseTimeList"
	              :key="it"
	              @click="changevisitCountCurrTimeArea('flowConsumeData', i)"
	              >{{ it }}</span
	            >
	          </span>
	        </p>
	        <div class="data-overview__row-content">
	          <echarts-line series-name="流量消耗" />
	        </div>
	      </div>
	    </div> -->
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { activity } from "@/api";
import echartsLine from "@/components/echartsLine.vue";
import dateFormat from "ourwill-feutil/common/dateFormat";

const dataOverviewData = ref([
	// {
	//   title: "昨日|官网访问人数（人）",
	//   data: "4,342",
	//   increaseUnit: "环比",
	//   havePercentage: true,
	//   percentage: "6.53%",
	// },
	// {
	//   title: "近30天 | 官网访问人数（人）",
	//   data: "4,342",
	//   increaseUnit: "环比",
	//   havePercentage: true,
	//   percentage: "6.53%",
	// },
	// {
	//   title: "昨日 | 用户后台访问人数（人）",
	//   data: "4,342",
	//   increaseUnit: "环比",
	//   havePercentage: true,
	//   percentage: "6.53%",
	// },
	// {
	//   title: "近30天 | 用户后台访问人数（人）",
	//   data: "4,342",
	//   increaseUnit: "环比",
	//   havePercentage: true,
	//   percentage: "6.53%",
	// },
	{
		title: "注册总人数（人）",
		data: "0",
		increaseUnit: "昨日新增",
		increaseData: "0",
		// 拥有文字气泡
		haveTooltip: true,
		titileTip: "通过映目会议平台注册的用户",
	},
	{
		title: "注册潜在客户数（人）",
		data: "0",
		increaseUnit: "昨日新增",
		increaseData: "0",
		// 拥有文字气泡
		haveTooltip: true,
		titileTip: "通过映目会议平台注册，且非观众用户",
	},
	{
		title: "会员当前剩余人数（人）",
		data: "0",
		increaseUnit: "7日新增",
		increaseData: "0",
	},
	{
		title: "历史付费总人数（人）",
		data: "0",
		increaseUnit: "7日新增",
		increaseData: "0",
	},
	{
		title: "最近 7 日成单量（单）",
		data: "0",
		increaseUnit: "环比",
		havePercentage: true,
		percentage: "0%",
	},
	{
		title: "最近 7 日成交额（元）",
		data: 0,
		increaseUnit: "环比",
		havePercentage: true,
		percentage: "0%",
	},
	{
		title: "首次付费人数（人）",
		data: "0",
		increaseUnit: "7日新增",
		increaseData: "0",
	},
	{
		title: "二次付费人数（人）",
		data: "0",
		increaseUnit: "7日新增",
		increaseData: "0",
	},
]);

const chooseTimeList = ["近30天", "近1年"];
const changevisitCountCurrTimeArea = (target: string, timeArea: number) => {
	echartsTime.value[target].visitCountCurrTimeArea = timeArea;

	if (+timeArea === 0) {
		echartsTime.value[target].type = 1;
		echartsTime.value[target].time[0] = dateFormat(new Date().getTime() - 86400000 * 30, "YYYY-MM-DD");
		echartsTime.value[target].dataMethod();
	} else {
		echartsTime.value[target].type = 3;
		echartsTime.value[target].time[0] = dateFormat(new Date().getTime() - 86400000 * 365, "YYYY-MM-DD");
		echartsTime.value[target].dataMethod();
	}
};

const getGlobalStatistics = async () => {
	const { ok, data } = await activity.getGlobalStatistics();
	if (!ok) return;
	dataOverviewData.value[0].data = data.data.userNum;
	dataOverviewData.value[0].increaseData = data.data.yesterIncUserNum;
	dataOverviewData.value[1].data = data.data.potentialUser;
	dataOverviewData.value[1].increaseData = data.data.yesterPotentialUser;
	dataOverviewData.value[2].data = data.data.memberNum;
	dataOverviewData.value[2].increaseData = data.data.day7IncMemberNum;
	dataOverviewData.value[3].data = data.data.payUserNum;
	dataOverviewData.value[3].increaseData = data.data.day7IncPayUserNum;
	dataOverviewData.value[4].data = data.data.day7IncOrderNum;
	dataOverviewData.value[4].percentage = data.data.ratioOrderNum === '--' ? '0' : data.data.ratioOrderNum;
	dataOverviewData.value[5].data = data.data.day7OrderAmount / 100;
	dataOverviewData.value[5].percentage = data.data.ratioOrderAmount === '--' ? '0' : data.data.ratioOrderAmount;
	dataOverviewData.value[6].data = data.data.payFirstUserNum;
	dataOverviewData.value[6].increaseData = data.data.day7IncPayFirstUserNum;
	dataOverviewData.value[7].data = data.data.mulPayUser;
	dataOverviewData.value[7].increaseData = data.data.day7IncMulPayUser;
};
getGlobalStatistics();

const echartsTime: any = ref({
	registerCountData: {
		visitCountCurrTimeArea: 0,
		time: [
			dateFormat(new Date().getTime() - 86400000 * 30, "YYYY-MM-DD"),
			dateFormat(new Date().getTime(), "YYYY-MM-DD"),
		],
		type: 3,
		dataMethod: () => {
			getUserEchartsData();
		},
		data: [],
	},
	newPlanCountData: {
		visitCountCurrTimeArea: 0,
		time: [
			dateFormat(new Date().getTime() - 86400000 * 30, "YYYY-MM-DD"),
			dateFormat(new Date().getTime(), "YYYY-MM-DD"),
		],
		type: 1,
		dataMethod: () => {
			getUserEchartsData();
		},
		data: [],
	},
	newActivityData: {
		visitCountCurrTimeArea: 0,
		time: [
			dateFormat(new Date().getTime() - 86400000 * 30, "YYYY-MM-DD"),
			dateFormat(new Date().getTime(), "YYYY-MM-DD"),
		],
		type: 1,
		dataMethod: () => {
			getActivityEchartsData();
		},
		data: [],
	},
	newMemberData: {
		visitCountCurrTimeArea: 0,
		time: [
			dateFormat(new Date().getTime() - 86400000 * 30, "YYYY-MM-DD"),
			dateFormat(new Date().getTime(), "YYYY-MM-DD"),
		],
		type: 1,
		dataMethod: () => {
			getAddMemberEchartsData();
		},
		data: [],
	},
	flowConsumeData: {
		visitCountCurrTimeArea: 0,
		time: 3,
	},
});

const getUserEchartsData = async () => {
	// dateFormat
	const params = {
		startDate: echartsTime.value.registerCountData.time[0],
		endDate: echartsTime.value.registerCountData.time[1],
		type: echartsTime.value.registerCountData.type,
	};
	const { ok, data } = await activity.getUserEchartsData(params);
	if (!ok) return;
	echartsTime.value["registerCountData"].data = data.data;
};
const getPlanEchartsData = async () => {
    // dateFormat
    const params = {
        startDate: echartsTime.value.newPlanCountData.time[0],
        endDate: echartsTime.value.newPlanCountData.time[1],
        type: echartsTime.value.newPlanCountData.type,
    };
    const { ok, data } = await activity.getPlanEchartsData(params);
    if (!ok) return;
    echartsTime.value["newPlanCountData"].data = data.data;
}
const getActivityEchartsData = async () => {
	// dateFormat
	const params = {
		startDate: echartsTime.value.newActivityData.time[0],
		endDate: echartsTime.value.newActivityData.time[1],
		type: echartsTime.value.newActivityData.type,
	};
	const { ok, data } = await activity.getActivityEchartsData(params);
	if (!ok) return;
	echartsTime.value["newActivityData"].data = data.data;
};
const getAddMemberEchartsData = async () => {
	const params = {
		startDate: echartsTime.value.newMemberData.time[0],
		endDate: echartsTime.value.newMemberData.time[1],
		type: echartsTime.value.newMemberData.type,
	};
	const { ok, data } = await activity.getAddMemberEchartsData(params);
	if (!ok) return;
	echartsTime.value["newMemberData"].data = data.data;
};

getUserEchartsData();
getActivityEchartsData();
getAddMemberEchartsData();
</script>
